rnr: interpolate
ある範囲の値を別の範囲にmappingするために使う
スクロールやジェスチャー入力などのアニメーションの変化をスムーズに行うため使う
docs
要は、
inputRangeでx軸の値、ouputRangeでy軸の値を、同要素数の配列で指定し、
そのxy座標上のグラフに沿って、valueを更新する
https://gyazo.com/036752b9bf0a5aa96b1d7b5dcd5aed2d
指定していない部分の補完も計算してくれる
例えば、以下のように指定する
inputRange == [0, 100]
outputRange == [1, 0]
この場合、入力値が50のとき、出力値は0.5になる
(input,output) = (50,0.5)というのは明示的に指定してないが補完してくれる
code:ts
interpolate(
value: number,
inputRange: number[],
outputRange: number[],
extrapolate?: 'identity' | 'clamp' | 'extend'
): number
value
アニメーション中に変化する値
e.g. クロールの位置やジェスチャーの入力値
inputRange
入力値の範囲を示す配列
valueがこの範囲内のどこに位置するかによって、対応するoutputRangeの値が計算される
outputRange
出力値の範囲を示す配列
inputRangeの各値に対応する出力値を指定する
extrapolate (optional)
inputRangeの外部にある値をどのように処理するかを指定する
docs内にグラフやdemoがあるので見るとわかりやすいmrsekut.icon
https://gyazo.com/c6661d0eaecc6ab4ab7028c9d27d4b0c
以下の3つ
extend (default)
範囲外に対しても、範囲内と同様の補完をする
clamp
境界値のまま留める
outputRangeの範囲外にはならないということ
identity
inputをそのまま返す
input == outputになるということ